<template>
	<view class="content">
		<view class="hearder">
			<view class="index_daohang flex flex-align flex-center" :style="'padding-top:'+height+'rpx'" v-if ='cartList.length!=0'>
				<view class="left">购物车</view>
				<view class="right" @click='manage'>{{ footerswitch ? '编辑' : '取消'}}</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="" style="height:120rpx"></view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view class="" :style="'height:'+height1+'rpx'"></view>
		<!-- #endif -->
		
		<view class="cart_center">
			<view class="list flex flex-align" v-if ='cartList.length!=0'>
				<checkbox-group @click="checkboxChange">
					<view class="center flex flex-align" v-for="(res,index) in cartList" :key= 'index'>
						<view class="check_true">
							<!-- <image :src="res.checked?'https://firework.cyx.zzcyx1688.cn/web/static/check_true.png':'https://firework.cyx.zzcyx1688.cn/web/static/check_false.png'" mode=""></image> -->
							<checkbox :checked="res.checked" :data-id="res.id" class="flex "  style="transform: scale(.7);"  color="#bbe68d"></checkbox>
						</view>
						<image :src="res.cover" mode=""></image>
						<view class="right">
							<view class="text_one biaoti uni-bold">{{res.name}}</view>
							<view class="guige">{{res.goods_spec}}</view>
							<view class="chicun"></view>
							<view class="price flex flex-align flex-bt">
								<view class="flex flex-align">
									<view class="red">￥{{res.price_selling}}</view>
								</view>
								<tui-numberbox :max="99" :min="min" :value="res.count" :index="index" @change="changeValue"></tui-numberbox>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
			<view class="empty-box" v-if ='cartList.length==0'>
				<image src="https://firework.cyx.zzcyx1688.cn/web/static/cart/shop_cart.png" mode=""></image>
				<view class="uni-flex uni-flex-align uni-flex-center uni-text-gray" style="margin: -140rpx auto 50rpx;">购物车空空如也~</view>
				<view class="gouwu" @click="go_home">去逛逛~</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		
		<!-- #endif -->
		<view class="cart_footer flex flex-align flex-bt" v-if ='cartList.length!=0'>
			<view class="left flex flex-align" @click="checkboxAllChange">
				<!-- <image :src="isAllSelect?'https://firework.cyx.zzcyx1688.cn/web/static/check_true.png':'https://firework.cyx.zzcyx1688.cn/web/static/check_false.png'" mode=""></image> -->
				<checkbox  :checked="isAllSelect" color="#bbe68d" style="transform: scale(0.7);" />全选
			</view>
			<view class="right flex flex-align">
				<view class="heji" v-if="footerswitch==true">合计: ￥{{selectCountPrice}}</view>
				<view class="btn" v-if="footerswitch==true" @click="submite">去确认</view>
				<view class="btn" @click="subDel" v-else>删除</view>
			</view>
		</view>
		<TabBar :tabBarShow="2"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				title: 'Hello',
				cartCount:0,
				cartList:[],
				isAllSelect:false,
				selectValue:[],
				selectCountPrice:0,
				check_id:[],
				footerswitch:true,
				min:1,
				height:'',
				height1:''
			}
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad() {
			// #ifndef H5
			let sysInfo = uni.getSystemInfoSync();
			console.log(sysInfo)
			let rect = uni.getMenuButtonBoundingClientRect();
			console.log(rect)
			let navBarHeight = rect.height 
			this.height = navBarHeight
			this.height1 = navBarHeight+70
			// #endif
			
		},
		onShow() {
			let that = this
			that.isAllSelect =false
			that.footerswitch =true
			that.get_list()
			that.selectCountPrice = 0
			that.check_id = []
			that.selectValue = []
		},
		methods: {
			go_home(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			get_list(){
				let that = this
				that.tui.request("api.auth.order/cartList", "GET", {}, false, true, true).then((res) => {
					if(res.code==1){
						res.data.list.map((item,index)=>{
							item.checked = false
						})
						that.cartList =res.data.list
						console.log(that.cartList)
					}
					
				}).catch((res) => {})
			},
			changeValue(value) {
				let that = this
				that.cartList[value.index].count = value.value
				that.switchSelect();
			},
			manage: function() {
				let that = this;
				if(that.cartList.length==0){
					return
				}
				that.footerswitch = !that.footerswitch;
			
			},
			checkboxAllChange(){
				let that = this
				that.isAllSelect = !that.isAllSelect
			},
			checkboxChange(e){
				let that = this;
				let value = [];
				let valid = that.cartList;
				let arr1 = [];
				let arr2 = [];
				let arr3 = [];
				if(e.target.dataset.id==undefined) return
				if(that.check_id.length==0){
					that.check_id.push(e.target.dataset.id)
				}else{
					
					if(that.check_id.indexOf(e.target.dataset.id)==-1){
						that.check_id.push(e.target.dataset.id)
					}else{
						that.check_id.map((item,index)=>{
							if(item==e.target.dataset.id){
								that.check_id.splice(index,1)
							}
						})
					}
				}
				let newValid = valid.map(item => {
					if (that.inArray(item.id, that.check_id)) {
						item.checked = true;
						arr1.push(item);
					} else {
						item.checked = false;
						arr2.push(item);
					}
					return item;
				});
				
				that.$set(that.cartList, 'valid', newValid);
				
				that.isAllSelect = newValid.length === arr1.length 
				that.selectValue = that.check_id;
				that.switchSelect();
			},
			checkboxAllChange() {
				this.isAllSelect = !this.isAllSelect
				if (this.isAllSelect) {
					this.setAllSelectValue(1)
				} else {
					this.setAllSelectValue(0)
				}
			},
			setAllSelectValue: function(status) {
				let that = this;
				let selectValue = [];
				let valid = that.cartList
				that.check_id = []
				if (valid.length > 0) {
					let newValid = valid.map(item => {
						if (status==1) {
							item.checked = true;
							selectValue.push(item.id);
							that.isAllSelect = true;
						} else {
							item.checked = false;
							that.isAllSelect = false;
						}
						return item;
					});
					
					that.$set(that.cartList, 'valid', newValid);
					that.selectValue = selectValue;
					that.check_id = that.selectValue
					that.switchSelect();
				}
			},
			switchSelect: function() {
				let that = this;
				let validList = that.cartList;
				let selectValue = that.selectValue;
				let selectCountPrice = 0.00;
				if (selectValue[0]==undefined) {
					that.selectCountPrice = selectCountPrice;
				} else {
					for (let index in validList) {
						if (that.inArray(validList[index].id, selectValue)) {
							selectCountPrice = that.$util.$h.Add(selectCountPrice, that.$util.$h.Mul(validList[index].count, validList[index].price_selling))
						}
					}
					that.selectCountPrice = selectCountPrice;
				}
			},
			inArray: function(search, array) {
				for (let i in array) {
					if (array[i] == search) {
						return true;
					}
				}
				return false;
			},
			subDel(e) {
				// console.log(e);
				let that = this
				if(that.selectValue.length==0){return}
				that.tui.request("api.auth.order/cartDet", "post", {cart_id:that.selectValue}, false, true, false).then((res) => {
					that.tui.toast(res.info)
					setTimeout(function(){
						that.get_list()
					},1000)
				}).catch((res) => {})
			},
			submite(){
				let that = this
				let data = []
				that.cartList.map((item,index)=>{
					if(item.checked){
						console.log(item)
						data=data+ item.goods_code+"@"+item.spec+"@"+item.count+"||"
					}
				})
				data = data.slice(0, -2)
				if(data==''){
					that.tui.toast('请选择需预约的产品')
					return false
				}
				that.tui.request("api.auth.order/add", "post", {items:data}, false, true, false).then((res) => {
					console.log(res)
					if(res.code==1){
						setTimeout(function(){
							that.tui.href('/pages/shop/order_confirm?id='+res.data.order_no)
						},1000)
					}
					
				}).catch((res) => {})
			},
		}
	}
</script>

<style lang="scss">
	page{background: #f6f6f6;}
	.hearder{
		.index_daohang{position: fixed;top: 0;left: 0;width: 100%;box-sizing: border-box;padding:30rpx ;z-index: 11111;background: #fff;
			/* #ifndef H5 */
			padding-top: 90rpx;
			/* #endif */
			.left{width: 100%;border-radius: 60rpx;padding: 0 20rpx;margin-right: 20rpx;color: #333;text-align: center;font-size: 34rpx;margin-right: -80rpx;}
			.right{color: #333;width: 80rpx;text-align: right;}
		}
		
	}
	.cart_footer{position: fixed;width: 100%;left: 0;padding: 0rpx 0rpx 0rpx 30rpx;box-sizing: border-box;box-shadow:0px 0px 9px -7px #0f0f0f;background: #fff;
		bottom: 140rpx;
		.left{position: relative;font-size: 26rpx;
			image{width: 44rpx;height: 44rpx;margin-right:10rpx;}
		}
		.right{
			.heji{color: #666;margin-right: 20rpx;}
			.btn{color: #fff;background: #f20;padding: 35rpx 50rpx;font-size: 28rpx;font-weight: bold;}
		}
	}
	.cart_center{
		/* #ifndef H5 */
		padding-top: 20rpx;
		/* #endif */
		padding-bottom: 230rpx;
		.list{padding:0rpx 18rpx;margin-bottom: 20rpx;
			.header{
				border-bottom: 1px solid #eee;padding-bottom:30rpx;
			}
		}
		.center{padding-bottom: 20rpx;padding-top: 20rpx;background: #f9faf5;border: 2px solid #f9feea;margin-bottom: 20rpx;border-radius: 10rpx;
			.check_true{position: relative;
				// image{width: 44rpx;height: 44rpx;margin-right:10rpx;}
				// checkbox{position: absolute;z-index:  -9999;bottom: 0;}
			}
			image{width: 240rpx;height: 240rpx;}
			.right{
				.biaoti{width: 390rpx;margin-bottom: 10rpx;font-weight: bold;}
				line-height: 1.8;padding-left: 20rpx;
				.price{
					.red{color: #e73049;font-weight: bold;font-size: 30rpx;}
					.huaxian{text-decoration: line-through;color: #b3b3b3;font-size: 24rpx;margin: 0 40rpx 0 10rpx;}
				}
				.guige{height:120rpx;font-size: 24rpx;}
			}
		}
		.center:last-child{border-bottom: none;}
	}
	.gouwu{background: #bbe68c;color: #fff;width: 200rpx;margin: 0 auto;line-height: 70rpx;border-radius: 20rpx;position: relative;z-index: 1111;}
	
</style>
